<template>
  <!-- <section class="content"> -->
  <div>
    <div id="map">
      <div id="colorselect">
        <img src="images/tuli1.png">
      </div>
    </div>
    <div class="block">
      <span class="demonstration">选择日期区间</span>
       <el-date-picker
            v-model="value2"
            type="daterange"
            align="right"
            unlink-panels
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions2"
            @change="timefirst"
          ></el-date-picker>
      <el-slider v-model="value" :format-tooltip="format" :max="max" @change="change"></el-slider>
    </div>
  </div>
</template>

<script>
import { L } from "./js/heatlayer.js";

export default {
  data() {
    return {
      heat:null,
      map:null,
      tiles:null,

      projectId:'',
      currentDate:'',
      addressPoints: [],
      max: 31,
      //   color: '#71CD97'
      value: 1,
      dateList: [],
       pickerOptions2: {
        //仅当天前时间
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: this.shortcuts
      },
      value2: []
    };
  },
  methods: {
     timefirst(t) {
      this.value2 = t;
      this.getDate()
    },
    date() {
      const end = new Date();
      var seperator1 = "-";
      var year = end.getFullYear();
      var month = end.getMonth() + 1;
      var strDate = end.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }

      var endDate = year + seperator1 + month + seperator1 + strDate;

      const start = new Date();
      var startYear = start.getFullYear() ;
      var startMonth = start.getMonth() ;
      var startDate = start.getDate();
      if (startMonth >= 1 && startMonth <= 9) {
        startMonth = "0" + startMonth;
      }
      if (startDate >= 0 && startDate <= 9) {
        startDate = "0" + startDate;
      }
      var startDat =
        startYear + seperator1 + startMonth + seperator1 + startDate;
      this.value2 = [startDat, endDate];
    },
    format(val) {
      //  console.log(date[val])
      if (val == null) {
        val = 1;
      }
      return this.dateList[val];
    },
    getDate(){
      var data = {
        beginDateString:this.value2[0],
        endDateString:this.value2[1]
      }
      this.hotPic.queryDate(data)
      .then(res => {
        this.dateList = res.data
        this.max = this.dateList.length;
      })
    },
    getPointAndHeat(){
      var data = {
        projectId:this.projectId,
        date:this.currentDate,
        monitorItemId:8
      };
      this.hotPic.queryPoint(data)
      .then(res => {
        this.addressPoints = res.data
        this.heatPic()
      })
    },
    change(newVal) {
      this.currentDate = this.dateList[newVal]
      this.addressPoints = []
      this.map.removeLayer(this.heat)
      this.getPointAndHeat()
    },
    heatPic(){
    var addressPoints = this.addressPoints

    if (addressPoints.length === 0 || addressPoints == '[]') {
       addressPoints = [
      [-37.8839, 175.3745188667, "571"],
[-37.8869090667, 175.3657417333, "486"],
[-37.8894207167, 175.4015351167, "807"],
[-37.8927369333, 175.4087452333, "899"],
[-37.90585105, 175.4453463833, "1273"],
[-37.9064188833, 175.4441556833, "1258"],
[-37.90584715, 175.4463564333, "1279"],
[-37.9033391333, 175.4244005667, "1078"],
[-37.9061991333, 175.4492620333, "1309"],
[-37.9058955167, 175.4445613167, "1261"],
[-37.88888045, 175.39146475, "734"],
[-37.8950811333, 175.41079175, "928"],
[-37.88909235, 175.3922956333, "740"],
[-37.8889259667, 175.3938591667, "759"],
[-37.8876576333, 175.3859563833, "687"],
[-37.89027155, 175.3973178833, "778"],
[-37.8864473667, 175.3806136833, "631"],
[-37.9000262833, 175.4183242167, "1012"],
[-37.90036495, 175.4189457, "1024"],
[-37.9000976833, 175.4197312167, "1027"],
[-37.90239975, 175.42371165, "1067"],
[-37.9043379667, 175.42430325, "1080"],
[-37.9026441, 175.4231055167, "1068"],
[-37.8883536333, 175.3888573833, "718"],
[-37.9029948833, 175.4237386167, "1070"],
[-37.89824135, 175.4150421667, "982"],
[-37.8976067833, 175.41510265, "983"],
[-37.9023491333, 175.4225495, "1066"],
[-37.8856157167, 175.3775632833, "608"],
[-37.8963032667, 175.4132068, "951"],
[-37.8922813667, 175.4073402333, "1/898"],
[-37.88933345, 175.3956084333, "769"],
[-37.8936148833, 175.4090577, "906"],
[-37.8939398, 175.4094444833, "914"],
[-37.8857355333, 175.3722297667, "542"],
[-37.8931092167, 175.4083014, "898"],
[-37.9008253167, 175.4198128, "1030"],
[-37.9045052333, 175.4260735, "1100"],
[-37.9053927167, 175.42822265, "1130"],
[-37.90507935, 175.4313065, "1147"],
[-37.9055749667, 175.4319092167, "1154"],
[-37.9039034833, 175.4274736667, "1/1105"],
[-37.9037633, 175.4261181833, "1093"],
[-37.9038755, 175.42871045, "3/1105"],
[-37.90369555, 175.4285285, "2/1105"],
[-37.9056626, 175.4341078833, "1170"],
[-37.9018736833, 175.438852, "1/1213"],
[-37.9057596167, 175.4356650167, "1180"],
[-37.9053502, 175.4361049333, "1185"],
[-37.9053379167, 175.4366986167, "1195"],
[-37.9058892333, 175.4381450333, "1204"],
[-37.9060264167, 175.4400763167, "1220"],
[-37.9056766833, 175.4412592, "1233"],
[-37.9057312167, 175.4418380333, "1235"],
[-37.9061575833, 175.4421068667, "1242"],
[-37.9063946167, 175.4438004667, "1256"],
[-37.8996027667, 175.43995055, "4/1215"],
[-37.9006449667, 175.4395556833, "3/1215"],
[-37.9009138167, 175.4394061333, "2/1215"],
[-37.9034547, 175.4396315, "1219"],
[-37.9055243, 175.4396033, "1221"],
[-37.89952325, 175.4406619167, "5/1215"],
[-37.90561525, 175.4404853167, "1225"],
[-37.9045602333, 175.4477690333, "1285"],
[-37.9040051667, 175.4388491833, "1213"],
[-37.90588145, 175.4440349167, "1257"],
[-37.90595915, 175.4389286833, "1212"],
[-37.9059939667, 175.4398068833, "1218"],
[-37.8868631833, 175.37991055, "630"],
[-37.8878744833, 175.382179, "650"],
[-37.8880764, 175.3839845667, "670"],
[-37.8850457333, 175.3759821, "594"],
[-37.88446045, 175.3762872667, "587"],
[-37.8880782667, 175.38423415, "1/670"],
[-37.8863533833, 175.3690698667, "515"],
[-37.8861783167, 175.3710009833, "530"],
[-37.885424, 175.3716677833, "541"],
[-37.88524065, 175.3722141167, "547"],
[-37.9022371333, 175.47991035, "10"],
[-37.9020014833, 175.4799581667, "1"],
[-37.9020824, 175.4802630167, "2"],
[-37.9018589833, 175.4804760833, "3"],
[-37.9018211333, 175.4806769667, "4"],
[-37.9021543667, 175.4805538833, "5"]];
  } 
    this.heat = L.heatLayer(addressPoints).addTo(this.map);
    }
  },
  mounted() {
    this.map = L.map("map").setView([-37.87, 175.475], 12);
    this.tiles = L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
      // attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
    }).addTo(this.map);
    this.projectId = this.$route.query.projectId;
    this.date();
    this.currentDate = this.value2[0]
    this.getDate();
    this.getPointAndHeat()
  }
};
</script>


<style scoped>
* {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.block{
  padding-left:20px;
  width: 100%;
  height: 4%;
}
#map {
  width: 100%;
  height: 90%;
  position: relative;
}
#colorselect {
  width: 70px;
  height: 250px;
  /* background-color: aqua; */
  position: absolute;
  bottom: 50px;
  right: 50px;
  /* float:right; */
  visibility: visible;
  z-index: 999;
}
</style>
